<template>
	<!-- 音频播放器组件 -->
	<view class="fboxCol audio-slider">
		<view class='fboxRow Ycenter audio-item bg-F7F8FF'>
			<view class="icon-btn" @click='start(audioId)'>
				<image src='https://ebc-prod.cdn.benwunet.com/uni-static/icon-audio.png' class='icon' v-show='!status && !isPause'></image>
				<image src='https://ebc-prod.cdn.benwunet.com/uni-static/icon-audio-3.png' class='icon' v-show='status'></image>
				<image src='https://ebc-prod.cdn.benwunet.com/uni-static/icon-audio-4.png' class='icon' v-show='!status && isPause'></image>		
			</view>
			<view class='fboxCol flex1 info'>
				<view class="fboxRow Ycenter font28">语音介绍</view>
				<slider class="slider" @change='sliderChange' backgroundColor='#C8C8CC' activeColor='#CC9870' block-color="#CC9870" block-size="10" :min='0' :max='duration.toFixed(0)' :value='currentTime.toFixed(0)' :step='0.1'></slider>
				<view class='fboxRow Ycenter font20'>{{showTime1}} <view class="flex1"></view> {{showTime2}}</view>
			</view>
		</view>
		<view class="fboxRow Ycenter state-box lh40">
			<view class="flex1">
				<text class="font28 state" v-if="innerData.auditStatus != 1">{{innerData.auditStatus==0 ? '待审核': innerData.reason || ''}}</text>
			</view>
			<u-icon @click="del" color="#969699" size="32rpx" name="trash"></u-icon>
		</view>
	</view>
</template>
 
<script>
	export default {
		props: {
			url: String,
			voiceType:{
				type: String,
				default: ''
			},
			innerData: {
				type: Object,
				defalult: ()=>{
					return {}
				}
			},
			audioId: [String,Number]//必填，且id不可为数字0，建议格式 ‘audio’+数字
		},
		data() {
			return {
				context: null,
				currentTime: 0,
				duration: 0,
				status: false,
				isPause: false
			}
		},
		created() {
			// this.context = uni.createInnerAudioContext();//初始化音频
			// this.context.src = this.url;
			// this.onTimeUpdate();
			// this.onCanplay();
			// this.onEnded();
		},
		methods: {
			del(){
				uni.showModal({
					title: '',
					content: '是否要删除自定义语音？',
					confirmColor: '#110C22',
					cancelColor: '#969699',
					success:(res) =>{
						if (res.confirm) {
							this.$emit('del',this.voiceType)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			start(id) { //点击播放
				console.log("点击播放")
				let audioId = id;
				if(this.status) {
					this.context.pause();
					this.status = !this.status;
					this.isPause = true
				}else {
					// uni.$emit('stop',id)
					this.context.play()
					this.status = !this.status;
				}
			},
			onCanplay() { //进入可播放状态
				this.context.onCanplay(() => {
					this.context.duration;
					setTimeout(()=>{
						this.duration = this.context.duration;
					},1000)
				})
			},
			onTimeUpdate() { //音频播放进度
			 console.log("进入音频播放进度")
				 this.context.onTimeUpdate(() => {
					 if (!Number.isFinite( this.context.duration)) {//检测当前音频是否为无穷大
						this.context.currentTime = Number.MAX_SAFE_INTEGER; 
						this.context.currentTime = 0;
					 } else {
						 this.duration = this.context.duration;
						 this.currentTime = this.context.currentTime;
					 }
				 })
			},
			onEnded() { //播放结束
				this.context.onEnded(()=> {
					this.status = false;
					this.isPause = false
					this.currentTime = 0;
				})
			},
			getTime(time) {
				let m = parseInt(time / 60);
				let s = time % 60;
				return this.towNum(m) + ':' + this.towNum(s);
			},
			towNum(num) {
				if(num >= 10) {
					return num;
				}else {
					return '0' + num;
				}
			}
		}
	}
</script>
 
<style lang="scss" scoped>
	.audio-slider{padding: 36rpx 0 0;}
	.audio-slider .audio-item{padding: 16rpx 24rpx; width: 606rpx;height: 132rpx;background: #F4F8FB;border-radius: 10rpx;color: var(--contentFontLightColor)}
	.audio-slider .slider{margin: 0;}
	.audio-slider .icon-btn{margin-right: 20rpx;}
	.audio-slider .icon { width: 38rpx; height: 38rpx; }
	.state-box{margin-top: 18rpx;}
	.state-box .state{color: var(--contentSearchTitleColor);}
	
</style>